import React, { Component } from 'react';
import { Breadcrumb } from 'antd';
import './product.scss'
import { Link } from 'react-router-dom'
import Foot from '../../components3/foot/foot'
import Nav from '../nav/nav.jsx'
import axios from '../../../axios/axios'
import meiyoupro from '../../../img1/noproduct.png'
import { Pagination } from 'antd';
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  }
class productseach extends Component {
    constructor(props) {
        super(props);
        this.state = {
            productlist:[],
            num:0,
            nowye:1,
            houmeiyou:false
        }
    }
    componentWillMount(){
        axios.get('small/commodity/v1/findCommodityByKeyword?page=1&count=100&keyword='+this.props.match.params.keywords).then(res=>{
            this.setState({
                num:res.data.result.length
            });
            axios.get('small/commodity/v1/findCommodityByKeyword?page=1&count=10&keyword='+this.props.match.params.keywords).then(res=>{
                this.setState({
                    productlist:res.data.result,
                    youmeiyou:res.data.result.length<=0?false:true
                })
    
            })
        })
    }
    componentWillReceiveProps (nextProps){
        axios.get('small/commodity/v1/findCommodityByKeyword?page=1&count=100&keyword='+nextProps.match.params.keywords).then(res=>{
            this.setState({
                num:res.data.result.length
            });
            axios.get('small/commodity/v1/findCommodityByKeyword?page=1&count=10&keyword='+nextProps.match.params.keywords).then(res=>{
                this.setState({
                    productlist:res.data.result,
                    youmeiyou:res.data.result.length<=0?false:true
                })
    
            })
        })
    }
    fenye(i){
        if(i===0){
            //首页

            axios.get('small/commodity/v1/findCommodityByKeyword?page=1&count=10&keyword='+this.props.match.params.keywords).then(res=>{
                this.setState({
                    productlist:res.data.result
                })
    
            })
        }
    }
    fenyeN(page, pageSize){
        this.setState({
            nowye:page
        })
        axios.get('small/commodity/v1/findCommodityByKeyword?page='+page+'&count=10&keyword='+this.props.match.params.keywords).then(res=>{
            this.setState({
                productlist:res.data.result
            })

        })
    }
    render() {
        return (
            <div className="productsearch">
                <Nav  history={this.props.history}/>
                <div className="productsearch-main container">
                    <div className="mianbaoxie-wen">
                    <span>您当前的位置：</span>
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>首页</Breadcrumb.Item>
                        <Breadcrumb.Item href="###">搜索</Breadcrumb.Item>
                    </Breadcrumb>
                    </div>
                    {this.state.youmeiyou?(<div className="product-list">
                    {this.state.productlist.map((v,i)=>{
                        return(<div ket={v.commodityId}>
                            <Link to={'/producthome/detail/'+v.commodityId}>
                            <img src={v.masterPic} alt="" />
                            <span>{v.commodityName}</span>
                            <p>
                                <span>￥{v.price}</span>&nbsp;<i>￥{v.price+100}</i>&nbsp;
                            </p>
                            </Link>
                        </div>)
                    })}
                    </div>):(<div className="meiyoupro">
                        <Link to="/home"><img src={meiyoupro} alt=""/></Link>
                    </div>)}
                <div className={this.state.youmeiyou?'fenye':'hide fenye'}>
                    <Link to="###" onClick={this.fenye.bind(this,0)}>首页</Link>
                    <Pagination onChange={this.fenyeN.bind(this)} current={this.state.nowye} showSizeChanger={false} showQuickJumper total={this.state.num} itemRender={itemRender} />
                    <Link to="###" onClick={this.fenye.bind(this,3)}>确定</Link>
                    <span>共{this.state.num}条</span>
                    </div>
                </div>
                <Foot/>
            </div>
        );
    }
}

export default productseach;